<template>
  <el-header class="header-container">
    <!-- 使用flex布局实现左中右分布 -->
    <div class="header-content">
      <!-- 左侧区域 - 页面标题 -->
      <div class="left-section">
        <h3 class="page-title">{{ pageTitle }}</h3>
      </div>

      <!-- 中间区域 - 系统名称 -->
      <div class="center-section">
        <h2 class="system-title">{{ systemName }}</h2>
      </div>

      <!-- 右侧区域 - 用户信息 -->
      <div class="right-section">
        <div class="user-info">
          <el-avatar :src="avatarStore.currentAvatar" v-if="avatarStore.currentAvatar" />
          <el-avatar :icon="UserFilled" v-else />
          <span class="user-name">{{ userName }}</span>
          <!-- 可以在这里添加下拉菜单或其他用户操作 -->
        </div>
      </div>
    </div>
  </el-header>
</template>

<script setup>
  import { useAvatarStore } from '@/stores/avatarStore'
  import { UserFilled } from '@element-plus/icons-vue'

  const avatarStore = useAvatarStore()

  // 组件属性定义
  const props = defineProps({
    /**
     * 页面标题（左侧显示）
     */
    pageTitle: {
      type: String,
      default: '当前页面',
    },
    /**
     * 系统名称（中间显示）
     */
    systemName: {
      type: String,
      default: '管理系统',
    },
    /**
     * 用户名（右侧显示）
     */
    userName: {
      type: String,
      default: '用户',
    },
  })

  // 可以在这里添加emit事件定义，如果需要与父组件通信
  // const emit = defineEmits(['someEvent'])
</script>

<style scoped>
  .header-container {
    height: 60px;
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    padding: 0 24px;
  }

  .header-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .left-section,
  .center-section,
  .right-section {
    display: flex;
    align-items: center;
    height: 100%;
  }

  .page-title {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    color: #333;
  }

  .system-title {
    margin: 0;
    font-size: 22px;
    font-weight: bold;
    color: #409eff;
  }

  .user-info {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .user-name {
    font-size: 14px;
    color: #606266;
  }

  /* 响应式设计 - 可以根据需要调整 */
  @media (max-width: 768px) {
    .system-title {
      font-size: 18px;
    }

    .page-title,
    .user-name {
      font-size: 14px;
    }
  }
</style>
